<template>
  <div id="app">
    <el-form ref="form" :inline="true" label-width="80px">
    <el-form-item label="查看库存">
      <el-select v-model="product.id">
        <el-option v-for="(p) in products" :key="p.id" :label="p.name" :value="p.id"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item align="left">
      <el-button type="primary" @click="toDoAjax">搜索</el-button>
    </el-form-item>
    </el-form>
    <h1 align="center">{{msg}}</h1>
  </div>
</template>

<script>
    export default {
        name: "",
      data(){
          return {
            product:{},
            products:[],
            msg:""
          }
      },
      methods:{
        toDoAjax(){
          this.axios({
            url:"/products/"+this.product.id,
            method:"get"
          }).then((resp)=>{
            this.msg="该商品的库存是："+resp.data.quantity;
          });
        }
      },
      created(){
        this.axios({
          url:"/products",
          method:"get"
        }).then((resp)=>{
          this.products=resp.data
        });
      }
    }
</script>

<style scoped>

</style>
